<template>
	<div class="quick-menu">
		<!-- <div class="empty" v-show="tableData.length == 0" @click="handleSet()">
      <span class="el-icon-plus"></span>
      <p>配置快捷菜单</p>
    </div> -->
		<ul>
			<li v-for="(item, index) in tableData" :key="item.id" @click="handleClick(item)" :style="{ background: bgc(index) }">
				<img :src="item.icon || defaultIcon" alt="" />
				<p class="name">{{ item.name }}</p>
			</li>
			<li class="empty" @click="handleSet()">
				<span class="el-icon-plus"></span>
				<p class="name">配置快捷菜单</p>
			</li>
		</ul>
	</div>
</template>
<script>
export default {
	data() {
		return {
			defaultIcon: require('@/assets/users/b1.png'),
			listQuery: {
				page: 1,
				limit: 99,
				type: 'quick',
				createBy: undefined
			},
			tableData: [],
			colorList: ['#00bcd4', '#2196f3', '#9c27b0', '#f44336', '#009688', '#3f51b5', '#4caf50', '#8bc34a', '#03a9f4', '#ff9800', '#ff5722', '#e91e63']
		};
	},
	mounted() {
		this.getList();
		this.$bus.$on('refreshQuickMenuList', () => {
			this.getList();
		});
	},
	beforeDestroy() {
		this.$bus.$off('refreshQuickMenuList');
	},
	methods: {
		async getList() {
			this.listQuery.createBy = this.$store.getters.userId;
			let res = await this.$store.dispatch('querySysColumnControl', this.listQuery);
			this.tableData = res.data;
		},
		handleClick(item) {
			let url = item.field2;
			let obj = {};
			if (url.indexOf('/') === -1) {
				obj = { name: item.field2 };
			} else {
				obj = { path: item.field2 };
			}
			let routeUrl = this.$router.resolve(obj);
			window.open(routeUrl.href, '_blank');
		},
		bgc(idx) {
			let num = idx % this.colorList.length;
			let color = this.colorList[num];
			return color;
		},
		handleSet() {
			this.$bus.$emit('showQuickMenu');
		}
	}
};
</script>
<style scoped lang="scss">
.quick-menu {
	width: 100%;
	.empty {
		width: 17%;
		margin: 0 2%;
		height: 100px;
		overflow: hidden;
		padding: 20px 2%;
		text-align: center;
		background: #ccc;
		border-radius: 10px;
		cursor: pointer;
		color: #fff;
		font-size: 50px;
		p {
			margin-top: 10px;
			font-size: 14px;
		}
	}
	ul {
		li {
			float: left;
			width: 17%;
			margin: 0 2%;
			margin-bottom: 30px;
			height: 100px;
			overflow: hidden;
			padding: 20px 2%;
			text-align: center;
			background: #f60;
			border-radius: 10px;
			cursor: pointer;
			img {
				width: auto;
				height: 50px;
			}
			.name {
				margin-top: 10px;
				font-size: 14px;
				font-weight: 600;
				color: #fff;
			}
		}
	}
}
</style>
